<template>
  <div id="homeBox">
    <el-container style="height:900px">
      <el-main>
        <el-card class="box-card" style="width: 1000px;height: 260px">
          <div slot="header" class="clearfix" style="height: 70px;margin-top: -80px;float:left;">
<!--展示题目类型难易度学科等-->
            <div>
              <span>{{this.topicType}}  </span>
              <span><el-tag type="warning" effect="dark" style="height: 30px">{{ this.topicDifficult }}</el-tag></span>
              <span><el-tag type="info" style="height: 32px">{{this.topicObject}}</el-tag></span>
            </div>
          </div>
<!--展示题目内容-->
          <div class="text item" style="height: 50px;float:left;margin-top: -35px">
            <span style="font-size: 20px;font-weight:bold ;">{{this.topicInfo.content}}</span>
          </div>
<!--充当分割线-->
          <el-card style="height: 0.1px;width: 1000px;margin-left: -20px;margin-top: 130px"></el-card>
<!--收藏反馈快查-->
          <span style="float:left;margin-top: -50px">
            <i :class="this.thisCollectIsCollect.css" @click="collectBtn">{{this.thisCollectIsCollect.name}}</i>
          </span>
          <span style="float:left;margin-top: -50px;margin-left: 30px">反馈</span>
          <span style="float:right;margin-top: -50px;margin-left: 30px">
            <el-button type="primary" icon="el-icon-search" @click="fastSearch">快查</el-button>
          </span>
        </el-card>
<!-- 评论区头-->
        <el-card class="box-card" style="margin-left: 10px;margin-top:30px;width: 1000px;height: 70px">
          <div slot="header" class="clearfix" style="height: 20px">
            <span style="float:left;margin-top: -70px">评论区</span>
            <span style="float:left;margin-top: -70px">（{{this.total}}）</span>
            <el-radio-group v-model="tabPosition" style="float: left;margin-top: -10px">
              <el-radio-button label="new" @click.native="bestNewComment">最新</el-radio-button>
              <el-radio-button label="hot" @click.native="bestHotComment">最热</el-radio-button>
            </el-radio-group>
            <span style="float:right;margin-top: -70px" @click="userWantComment">
              <el-tag >
                <i class="el-icon-edit">我要评论</i>
              </el-tag>
            </span>
          </div>
        </el-card>
<!--用户的具体评论-->
        <el-card class="box-card"  v-for="o in this.bestNewCommentList" :key="index" style="margin-left: 10px;margin-top: -1px;width: 1000px;height: 200px">
          <!--头像昵称评论时间-->
          <div style="height: 80px;width: 300px;margin-top: -35px">
            <!--头像-->
            <el-col :span="2">
              <div class="demo-basic--circle">
                <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
              </div>
            </el-col>
            <!--昵称-->
            <div style="font-size: 18px;float:left;margin-top: -30px;margin-left: 35px">
              {{o.userId}}
            </div>
            <!--评论时间-->
            <div style="font-size: 2px;float:right;margin-right: 120px;margin-top: -135px">
              {{o.time}}
            </div>
          </div>
          <!--具体评论-->
          <div style="float: left;margin-top: -110px;margin-left: -100px;width: 900px;" >
            <span style="height: 100px;margin-left: 80px;float:left;" >
<!--              具体具体具体具体具体(最多51个汉字)-->
              {{o.content}}
            </span>
          </div>
          <!--点赞-->
          <div style="float: left;margin-top: -55px;width: 200px;margin-left: -60px">
            <i class="el-icon-thumb" style="float: left;margin-top: 60px;margin-left: 40px">
              <span style="font-size: 10px;margin-left: 5px;">(点赞功能暂未开放)</span>
            </i>
          </div>
          <div style="float: left;margin-top: -66px;width: 200px;margin-left: -60px">
              <span style="font-size: 10px;margin-left: 5px;">回复(暂未开放)</span>
          </div>
          <div style="float: right;margin-top: -66px;width: 200px;">
            <span style="font-size: 10px;margin-left: 5px;" v-show="o.userCommentIs">
              <el-button @click="deleteUserComment(o.id)">删除</el-button>
            </span>
          </div>
        </el-card>
        <!--分页组件-->
        <div class="block" v-show="showPagination" style="float:left;margin-left: 200px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNo"
              :page-sizes="[3, 5]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-main>
      <el-aside width="450px">
<!--题目信息：发布时间上传者以及用户的身份-->
        <el-card class="box-card" style="margin-top: 40px">
          <div slot="header" class="clearfix">
            <div style="float:left;margin-top:-90px;height: 120px">
              <span>题目信息</span>
            </div>
          </div>
          <div style="float: left;margin-top:-90px">
            <div style="height: 50px">{{'发布时间：' +this.topicInfo.time  }}</div>
            <div style="height: 50px">{{'上传者： ' + this.uploaderNickName }}
              <el-tag type="success" v-for="o in this.uploaderRole" :key="index">{{o.name}}</el-tag>
            </div>
          </div>
        </el-card>
      </el-aside>
    </el-container>
<!--我要评论弹窗-->
    <el-dialog title="评论" :visible.sync="commentFormVisible">
      <el-form :model="form">
        <el-form-item label="我的评论">
          <el-input type="textarea" v-model="userComment"></el-input>
        </el-form-item>
        <el-button type="primary" style="width: 330px;float:left;margin-top:-70px" @click="loginButton">评论</el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="commentFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="commentButton">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "showTopic",
  components:{

  },
  data(){
    return{
      tabPosition: 'new',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"],
      id:'',//此id由路由跳转过来得到的
      topicDifficult:'',//题的难易度
      topicObject:'',//科目
      topicType:'',//题目类型
      uploaderNickName:'',//昵称
      topicInfo:{ //题目信息列表
        answer:'',
        content:'',
        difficultyLevelId:'',
        id:'',
        objectId:'',
        time:'',
        title:'',
        topicTypeId:'',
        userId: ''
      },
      uploaderRole:[{
        name:''
      }],
      thisCollectIsCollect:{
        value:false,
        css:'',
        name:''
      },
      showComment:true, //评论区是否展示
      bestNewCommentList:[{//最新评论列表
        content:'',
        id:'',//评论id
        time:'',
        userId:'',//评论人的用户昵称
        userCommentIs:false,//是否是当前用户评论的
      }],
      showPagination:false, //评论区的分页是否展示
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      commentFormVisible:false,//我要评论的弹窗是否展示 labelPosition: 'left',
      formLabelAlign: {
        username: '',
        password: ''
      },
      userComment:'',//用户评论的具体内容
    }
  },
  methods:{
    //获取题目的相关内容
    getTopicInfo(){
      this.$axios.post("/api/showTopic/getTopicInfoJ",{
        id:this.id
      }).then(resp=>{
        console.log(resp);
        this.topicDifficult=resp.data.data.difficult;
        this.topicObject=resp.data.data.object;
        this.topicInfo=resp.data.data.topicInfo;
        this.topicType=resp.data.data.type;
        this.uploaderNickName=resp.data.data.uploaderNickName;
        this.uploaderRole=resp.data.data.uploaderRole;
      });
    },
    //快查按钮跳转到kaifa.baidu.com进行查询
    fastSearch(){
      window.open(
          'https://kaifa.baidu.com/searchPage?wd='+this.topicInfo.content, '_blank');
    },
    //检查这道题用户是否收藏过
    checkUserCollectThisTopic(){
      this.$axios.post("/api/showTopic/checkIsCollectTopicJ",{
        id:this.id
      }).then(resp=>{
        console.log(resp);//后端响应回来true和false ture表示用户收藏了，false表示用户未收藏
        this.thisCollectIsCollect.value=resp.data.data;
        //如果this.thisCollectIsCollect.value是true则表示收藏了
        if(this.thisCollectIsCollect.value){
          this.thisCollectIsCollect.css='el-icon-star-on';
          this.thisCollectIsCollect.name='已收藏';
        }else {
          this.thisCollectIsCollect.css='el-icon-star-off';
          this.thisCollectIsCollect.name='收藏';
        }
      })
    },
    //收藏与取消收藏的按钮
    collectBtn(){
      this.thisCollectIsCollect.value=!this.thisCollectIsCollect.value;
      this.$axios.post("/api/showTopic/collectAndCancelJ",{
        id:this.id,
        title:this.thisCollectIsCollect.value //当前题状态
      }).then(resp=>{
        console.log(resp);//后端响应回来true和false ture表示用户收藏了，false表示用户未收藏
        this.thisCollectIsCollect.value=resp.data.data;
        //如果this.thisCollectIsCollect.value是true则表示收藏了
        if(this.thisCollectIsCollect.value){
          this.thisCollectIsCollect.css='el-icon-star-on';
          this.thisCollectIsCollect.name='已收藏';
          this.$message({
            type: 'success',
            message: '收藏成功!'
          });
        }else {
          this.thisCollectIsCollect.css='el-icon-star-off';
          this.thisCollectIsCollect.name='收藏';
          this.$message({
            type: 'success',
            message: '取消收藏成功!'
          });
        }
      })
    },
    //最新评论   解决问题：https://www.cnblogs.com/zsg88/p/13927168.html
    bestNewComment(el){
      // 当是input标签触发的点击事件时，阻止该事件
      if (el.target.tagName === 'INPUT') return
          this.getBestNewComment();
    },
    //获取最新评论的方法
    getBestNewComment(){
      this.bestNewCommentList=null;
      this.$axios.post("/api/showTopic/getNewCommentLJ",{
        id:this.id,
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize,
      }).then(resp=>{
        console.log(resp)
        this.bestNewCommentList=resp.data.data.commentList;
        this.total=resp.data.data.total;
        if(this.total!=0){
          this.showPagination=true;
        }
      });
    },
    //最热评论  解决问题：https://www.cnblogs.com/zsg88/p/13927168.html
    bestHotComment(el){
      // 当是input标签触发的点击事件时，阻止该事件
      if (el.target.tagName === 'INPUT') return
      alert('因点赞功能未开启的影响，最热功能也未开启')
    },
    //分页相关
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      this.getBestNewComment();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      this.getBestNewComment();
      //console.log(`当前页: ${val}`);
    },
    //我要评论按钮
    userWantComment(){
      this.commentFormVisible=true;
    },
    //评论确认按钮
    commentButton(){
      if(this.userComment==''){
        this.$message({
          type: 'error',
          message: '评论不能为空!'
        });
      }else {
        this.$axios.post("/api/showTopic/userCommentJ",{
          topicId:this.id,
          content:this.userComment
        }).then(resp=>{
          console.log(resp);
          this.getBestNewComment();
        });
        this.commentFormVisible=false;
        this.userComment='';
        this.$message({
          type: 'success',
          message: '评论成功!'
        });
      }
    },
    //删除评论按钮
    deleteUserComment(id){
      this.$axios.post("/api/showTopic/deleteUserCommentJ",{
        id:id
      }).then(resp=>{
        console.log(resp);
        this.getBestNewComment();
        this.$message({
          type: 'success',
          message: '删除评论成功!'
        });
      });
    }
  },
  created() {
    //刚加载页面就把题的id值传进去
    this.id=this.$route.query.id;
    //加载题目信息
    this.getTopicInfo();
    //检查当前题目是否被当前用户收藏了
    this.checkUserCollectThisTopic();
    //加载最新评论
    this.getBestNewComment();
  }
}
</script>

<style>
.el-card ::v-deep .el-card__body {
  padding: 0px;
  background-color: powderblue;
}
</style>